<template>
  <van-tabs v-model="active">
    <van-tab title="热卖榜">
      <ul>
        <li><div class="pic"><img src="../assets/img/1.jpg" alt=""></div>
          <div class="text"><p>标题</p><p>内容</p></div></li>
        <li><div class="pic"><img src="../assets/img/2.jpg" alt=""></div>
          <div class="text"><p>标题</p><p>内容</p></div></li>
        <li><div class="pic"><img src="../assets/img/3.jpg" alt=""></div>
          <div class="text"><p>标题</p><p>内容</p></div>
        </li>
      </ul></van-tab>
    <van-tab title="新歌榜"><ul>
      <li><div class="pic" ><img src="../assets/img/iu02.jpg" alt=""></div>
        <div class="text"><p>标题</p><p>内容</p></div></li>
      <li><div class="pic"><img src="../assets/img/lady.png" alt=""></div>
        <div class="text"><p>标题</p><p>内容</p></div></li>
      <li><div class="pic"> <img src="../assets/img/suo.jpg" alt=""></div>
        <div class="text"><p>标题</p><p>内容</p></div>
      </li>
    </ul></van-tab>
    <van-tab title="King榜"><ul>
      <li><div class="pic"><img src="../assets/img/1.jpg" alt=""></div>
      <div class="text"><p>标题</p><p>内容</p></div></li>
      <li><div class="pic"><img src="../assets/img/2.jpg" alt=""></div>
        <div class="text"><p>标题</p><p>内容</p></div></li>
      <li><div class="pic"><img src="../assets/img/3.jpg" alt=""></div>
        <div class="text"><p>标题</p><p>内容</p></div>
      </li>
    </ul></van-tab>
  </van-tabs>
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs } from 'vant';

Vue.use(Tab);
Vue.use(Tabs);
export default {
name: "tab",
  data() {
    return {
      active: 2,
    };
  },
}
</script>

<style scoped lang="less">
li{
  width: 100%;
  overflow: hidden;
}
  .pic{
    float: left;
    width: 50%;
    img{
      width: 100%;
    }
  }
  .text{
    margin-left: 20px;
    float: left;
  }

</style>